<!--
 * @Author       : 邱狮杰
 * @Date         : 2021-09-02 10:00:11
 * @LastEditTime : 2021-09-08 14:52:02
 * @FilePath     : /smallnewhope/src/page/luckDraw/components/video.vue
 * @Description  : 腾讯会员
-->

<script setup lang="ts">
import { Reward } from "/@/components/index";
import { useGo } from '/@/hooks/go'
import clipboard from 'clipboard'

import subcodeTencentVideo from "/@/assets/images/subcodeTencentVideo.png";
import subcodeRedemptionCodeButton from "/@/assets/images/subcodeRedemptionCodeButton.png"; // 获取兑换码button
const props = withDefaults(defineProps<{ code: string }>(), {})
const [go] = useGo()
function alerts() {
  const c = new clipboard('.subcodeRedemptionCodeButton', {
    text: () => {
      return props.code
    }
  })
  c.on('success', () => {
    alert(`兑换码复制成功！兑换码为: ${props.code}`)
    c.destroy()
  })
  c.on('error', () => {
    alert(`兑换码复制失败!请手动复制,兑换码为: ${props.code}`)
    c.destroy()
  })
  go({ name: 'index' })
}
</script>
<template>
  <Reward>
    <template #img>
      <img :src="subcodeTencentVideo" alt="subcodeTencentVideo" class="subcodeTencentVideo" />
    </template>
    <template #button>
      <img
        @click="alerts"
        :src="subcodeRedemptionCodeButton"
        alt="subcodeTencentVideo"
        class="subcodeRedemptionCodeButton"
      />
    </template>
  </Reward>
</template>

<style lang="scss" scoped>
.subcodeRedemptionCodeButton {
  position: absolute;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  width: 205px;
  height: 42px;
  z-index: 101;
}
.subcodeTencentVideo {
  position: absolute;
  top: 146px;
  left: 50%;
  transform: translateX(-50%);
  width: 317px;
  height: 395px;

  z-index: 101;
}
</style>
